<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
</head>

<body>
<button value="301" onclick='setRoom("301")'>301</button>
<button value="302" onclick='setRoom("302")'>302</button>
<button value="303" onclick='setRoom("303")'>303</button>
<img id="img" src="./9.jpg" width="800px" height="600px" alt="">
<!--<img id="img" src="./9.jpg" width="800px" height="600px" hidden>-->
<canvas id="play" width="800px" height="600px"></canvas>

</body>
</html>

<script type="text/javascript">
  let num = 8;
  let imgsrc = "";
  let room = "301";
  let position_list = [];
  let frameTime = 100;

  function setRoom(string) {
    room = string;
    console.log(room);
    changRoom(room);
  }

  function player() {
    download();
    document.getElementById("img").setAttribute("src", imgsrc);
    // pic = imgsrc;
  }

  function draw() {
    pic = document.getElementById("img");
    let canvas = document.getElementById("play");
    let ctx = canvas.getContext('2d');

    ctx.drawImage(pic, 0, 0, 800, 600);
    console.log(position_list)

    for (let p = 0; p < position_list.length; p++) {
      let left = position_list[p].x1;
      let top = position_list[p].y2;
      let right = position_list[p].x2;
      let bottom = position_list[p].y1;
      let name = position_list[p].name;
      // let left = 100;
      // let top = 200;
      // let right = 200;
      // let bottom = 100;
      // let name = "2222222";
      ctx.moveTo(left, bottom);
      ctx.lineTo(left, top);
      ctx.lineTo(right, top);
      ctx.lineTo(right, bottom);
      ctx.lineTo(left, bottom);

      ctx.stroke();
      ctx.strokeStyle = "red";
      ctx.font = "48px serif";
      ctx.fillStyle = "red";
      ctx.fillText(name, right, top);
      ctx.globalCompositeOperation='source-over';
    }
  }

  setInterval(draw, 2 * frameTime)
  setInterval(player, frameTime)

  function changRoom(room) {
    let formData = new FormData();
    formData.append("roomId", room);
    let uploadAjax = $.ajax({
      type: "post",
      //后端需要调用的地址
      url: "http://113.55.52.87:8080/changeRoom",
      data: formData,
      contentType: false,
      processData: false,
      //设置超时
      timeout: 10000,
      async: false,
      success: function (htmlVal) {
        //成功后回调
      },
      error: function (data) {
      },
      //调用执行后调用的函数
      complete: function (XMLHttpRequest, textStatus) {
        if (textStatus === 'timeout') {
          uploadAjax.abort(); //取消请求
          //超时提示：请求超时，请重试
          alert("请求超时，请重试")
          //请求超时返回首页
          closeCard();
        }
      }
    });
  }


  function download() {
    $.ajax({
      url: "http://113.55.52.87:8080/getPhoto",
      data: {
        // list: "",
        // photoBase64: "",
        // data
      },
      type: "get",
      async: false,
      success: function (data) {
        console.log(data);
        if (data.code !== 999) {
          position_list = data.list;
          imgsrc = data.photoBase64;
        }
      },
      error: function () {
        // imgsrc =
      }
    })
  }

</script>
